<template>
    <div id="customerSearch">
        <div class="header">
            <h3 style="background-color:white; height:50px; line-height:50px;"> | 客户管理</h3>
            <p class="header-title-2" >&emsp;客户信息检索</p>
        </div>
        <div class="customerLook">
            <p class="customerLook-1">
                姓氏 <input type="search" class="customer-search-1" placeholder="请输入姓名" v-model="getByEmpCode">
            </p>
            <p class="customerLook-2">
                所属机构 <el-select type="search" class="customer-search-2" placeholder="请选择机构" v-model="getByMechanism">
                    <el-option label="淮安分行" value="淮安分行" style="text-align: center;height:30px;"></el-option>
                    <el-option label="淮安开发区支行" value="淮安开发区支行" style="text-align: center"></el-option>
                    <el-option label="盱眙支行" value="盱眙支行" style="text-align: center"></el-option>
                </el-select>
            </p>
            <p class="customerLook-3">
                出生日期 <el-date-picker class="customer-search-3" v-model="getByData" type="date" placeholder="请选择出生日期"></el-date-picker>
            </p>
            <el-button class="findMsg" @click="findMsg">查询</el-button>
            <el-button class="reset" @click="reset">重置</el-button>
        </div>

        <div class="customer-table">
            <el-table :data="tableData" border 
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}" >
                <el-table-column header-align="center" prop="customerCode" label="客户编号" width="100"></el-table-column>
                <el-table-column header-align="center" prop="customerName" label="客户姓名" width="120"></el-table-column>
                <el-table-column header-align="center" prop="mechanism" label="入行机构" width="150"></el-table-column>
                <el-table-column header-align="center" prop="sex" label="客户性别" width="100"></el-table-column>
                <el-table-column header-align="center" prop="data" label="出生日期" width="189"></el-table-column>
                <el-table-column header-align="center" prop="assets" label="总资产" width="150"></el-table-column>
                <el-table-column header-align="center" prop="phone" label="电话号码" width="150"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

export default ({
    name:"CustomerSearch",
    data(){
        return{
            getByEmpCode:"",
            getByMechanism:"",
            getByData:"",
            tableData:[],
        }
    },
    methods:{
        findMsg(){},
        reset(){}
    }
})
</script>

<style scoped>
#customerSearch{
    width: 960px;
    height: 580px;
    position: relative;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    background-color: #f4f7fd;
}
.customerLook{
    position: relative;
    top: -22px;
    width: 960px;
    height: 60px;
    line-height: 60px;
    padding-left: 10px;
    background-color: rgb(255, 255, 255);
}
.header-title-2{
    position: relative; 
    top: -7px;
    background-color:white; 
    height:40px;
    line-height:40px; 
    font-weight:bold; 
    font-size:18px;
}
.customerLook-1{
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height: 50px;
}
.customerLook-2{
    display: inline-block;
    width: 260px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-left: 10px;
    /* background-color: brown; */
}
.customerLook-3{
    display: inline-block;
    width: 280px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-left: 30px;
    /* background-color: brown; */
}
.customer-search-1{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    margin-right: 10px;
    border: 1px solid rgb(211, 210, 210);
    background-color: rgb(247, 247, 247);
}
/deep/.el-input__inner{
    height: 30px;
    line-height: 30px;
    width: 180px;
    background-color: rgb(247, 247, 247);
}
.customer-search-3{
    width: 180px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    margin-left: 10px;
    background-color: rgb(247, 247, 247);
}

.findMsg{
    position: relative;
    top: 2px;
    left: 40px;
    width: 70px;
    height: 35px;
    color: rgb(255, 255, 255);
    background-color: rgb(113, 245, 183);
    border: none;
}
.findMsg:hover{
    color: rgb(255, 254, 254);
    background-color: green;
}
.reset{
    position: relative;
    top: 2px;
    left: 40px;
    width: 70px;
    height: 35px;
    color: rgb(0, 0, 0);
    background-color: rgb(230, 230, 230);
    border: none;
}
.reset:hover{
    color: white;
    background-color: gray;
}

.customer-table{
    position: relative;
    top: -20px;
}
</style>